<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
    <script type="text/javascript" charset="utf-8">
      	mui.init({
		  gestureConfig:{
		   tap: true, //默认为true
		   doubletap: true, //默认为false
		   longtap: true, //默认为false
		   swipe: true, //默认为true
		   drag: true, //默认为true
		   hold:false,//默认为false，不监听
		   release:false//默认为false，不监听
		  }
		});
      	
		 
		 mui.plusReady(function(){
		 	//tap为mui封装的单击事件，可参考手势事件章节
		document.getElementById('test').addEventListener('tap', function() {
		  //打开关于页面
		  mui.openWindow({
		    url: 'barcode.html', 
		    id:'barcode'
		  });
		});
		    
		});
		
      	$(document).ready(function() {
         
              setInterval( function() {
              var seconds = new Date().getSeconds();
              var sdegree = seconds * 6;
              var srotate = "rotate(" + sdegree + "deg)";
              
              $("#sec").css({"-moz-transform" : srotate, "-webkit-transform" : srotate});
                  
              }, 1000 );
              
         
              setInterval( function() {
              var hours = new Date().getHours();
              var mins = new Date().getMinutes();
              var hdegree = hours * 30 + (mins / 2);
              var hrotate = "rotate(" + hdegree + "deg)";
              
              $("#hour").css({"-moz-transform" : hrotate, "-webkit-transform" : hrotate});
                  
              }, 1000 );
        
        
              setInterval( function() {
              var mins = new Date().getMinutes();
              var mdegree = mins * 6;
              var mrotate = "rotate(" + mdegree + "deg)";
              
              $("#min").css({"-moz-transform" : mrotate, "-webkit-transform" : mrotate});
                  
              }, 1000 );
         
        }); 
    </script>
    <style type="text/css">
    	* {
        	margin: 0;
        	padding: 0;
        }
        
        #clock {
        	position: relative;
        	width: 300px;
        	height: 300px;
        	margin: 20px auto 0 auto;
        	background: url(images/clockface.jpg);
        	background-size: cover ;
        	list-style: none;
        	}
        
        #sec, #min, #hour {
        	position: absolute;
        	width: 15px;
        	height: 300px;
        	top: 0px;
        	left: 135px;
        	}
        
        #sec {
        	background: url(images/sechand.png);
        	background-size: cover ;
        	z-index: 3;
           	}
           
        #min {
        	background: url(images/minhand.png);
        	background-size: cover ;
        	z-index: 2;
           	}
           
        #hour {
        	background: url(images/hourhand.png);
        	background-size: cover ;
        	z-index: 1;
           	}
           	
        p {
            text-align: center; 
            padding: 10px 0 0 0;
            }
            
       
    </style>
</head>
<body>
	<header class="mui-bar mui-bar-nav">
	    <h1 class="mui-title">标题</h1>
	</header>
	<div class="mui-content">
	    <ul class="mui-table-view"> 
	        <li class="mui-table-view-cell mui-collapse">
	            <a class="mui-navigate-right" href="#">看表</a>
	            <div class="mui-collapse-content">
	            	<div class="mui-card">
						<!--页眉，放置标题-->
						<div class="mui-card-header">作者由健</div>
						<!--内容区-->
						<div class="mui-card-content">
							<ul id="clock" >	
							   	<li id="sec"></li>
							   	<li id="hour"></li>
								<li id="min"></li>
							</ul>
						</div>
						<!--页脚，放置补充信息或支持的操作-->
						<div class="mui-card-footer">由健</div>
					</div>
	                
	            </div>
	        </li>
	        
	        <div class="mui-slider">
			</div>
	    </ul>
	    
	    
	</div>

    
    <nav class="mui-bar mui-bar-tab">
	    <a class="mui-tab-item mui-active">
	        <span class="mui-icon mui-icon-home" id="test"></span>
	        <span class="mui-tab-label">首页</span>
	    </a>
	    <a class="mui-tab-item">
	        <span class="mui-icon mui-icon-phone"></span>
	        <span class="mui-tab-label">电话</span>
	    </a>
	    <a class="mui-tab-item">
	        <span class="mui-icon mui-icon-email"></span>
	        <span class="mui-tab-label">邮件</span>
	    </a>
	    <a class="mui-tab-item">
	        <span class="mui-icon mui-icon-gear"></span>
	        <span class="mui-tab-label">设置</span>
	    </a>
	</nav>
</body>
</html>